<template>
    <div>
        <el-card class="box-card">
            <div v-show="isShow">
            <div
                v-for="photographer in photographerDetail"
                :key="photographer.userId"
                class="text item"
            >
                <div class="imgbackground">
                    <img
                        class="avatar"
                        :src="photographer.userAvatar"
                        alt="avatar"
                        @click="_toDetail(photographer.userId)"
                    />
                    <div class="info">
                        <div
                            class="name"
                            @click="_toDetail(photographer.userId)"
                        >
                            {{ photographer.nick }}
                        </div>
                        <!-- <div>
                        {{ userDetail.signature }}
                    </div> -->
                        <el-col :span="36" class="info-text">
                            <el-row>
                                <el-col :span="4">作品</el-col>
                                <el-col :span="4">{{
                                    photographer.photoCounts
                                }}</el-col>
                                <el-col :span="4">粉丝</el-col>
                                <el-col :span="4">{{
                                    photographer.fanCounts
                                }}</el-col>
                                <el-col :span="4">被赞</el-col>
                                <el-col :span="4">{{
                                    photographer.approvalCounts
                                }}</el-col>
                            </el-row>
                        </el-col>
                        <!-- 再次点击已关注则弹出取消关注提醒 -->
                        <!-- <div class="follow">
                            <el-button
                                type="danger"
                                v-if="token === '' || isFollowed === 0"
                                @click="_follow"
                                >关注</el-button
                            >
                            <el-button
                                type="danger"
                                v-else
                                @click="_cancleFollow"
                                >已关注</el-button
                            >
                        </div> -->
                    </div>
                </div>
                <div
                    class="work"
                    v-for="(item, index) in photographer.worksDetail"
                    :key="index"
                >
                    <img
                        :src="item.link"
                        class="image"
                        lazy
                        @click="_openPhotoDetail(item.photoId)"
                    />

                    <!-- <img :src="workDetail.link" class="image" lazy /> -->
                    <!-- <img :src="workDetail.link" class="image" lazy /> -->
                </div>
            </div>
        </div>
            <el-button @click="_toLastPhotographers">上一页</el-button>
            <el-button @click="_toNextPhotographers">下一页</el-button>
        </el-card>
        <!-- 图片详情 -->
        <!-- dialogVisible：true:打开/false:关闭 -->
        <!-- photoId：传入图片id -->
        <!--  @close="photoDetailVisible = false" 必须否则有警告（el-dialog的警告）  -->
        <photo-detail
            :dialogVisible="photoDetailVisible"
            :photoId="photoId"
            @close="photoDetailVisible = false"
        />
    </div>
</template>
<script>
import imageApi from '../request/imageApi';
import Vue from 'vue';
import PhotoDetail from '../component/PhotoDetail.vue';
import photographerApi from '../request/photographerApi';
export default {
    components: { PhotoDetail },
    data() {
        return {
            // 图片详情
            photoDetailVisible: false,
            // 图片id
            photoId: null,
            pageNum: 1,
            pages: 0,
            token: '',
            isFollowed: 0,
            index: 0,
            photographerDetail: [
                {
                    approvalCounts: '52',
                    fanCounts: '2',
                    nick: 'frank',
                    photoCounts: '25',
                    userAvatar:
                        'https://ts1.cn.mm.bing.net/th/id/R-C.3a7d6237e20a3448001b548e43b241e5?rik=SH9ayjpFoV90Tg&riu=http%3a%2f%2fgx8899.com%2fuploads%2fallimg%2f2016060814%2fs0y1n1cvwab.jpg&ehk=6kfarw6xdv5Iu5qYrzZ8Fg5YM3HzQQs2rIPmB4uEg8A%3d&risl=&pid=ImgRaw&r=0&sres=1&sresct=1',
                    userId: '13',
                    worksDetail: [],
                },
            ],

            // 作品列表
            worksDetail: [
                {
                    approvalCounts: '5',
                    link: 'https://b.zol-img.com.cn/desk/bizhi/image/10/960x600/1598319721647.jpg',
                    photoId: 3,
                },
                {
                    approvalCounts: '3',
                    link: 'https://ts1.cn.mm.bing.net/th/id/R-C.92b672f405d73bfe26c31e82cd85734c?rik=hJW%2f48Q6FBns3w&riu=http%3a%2f%2fwww.gx8899.com%2fuploads%2fallimg%2f2018042010%2fk3qbcgdiwoq.jpg&ehk=5JxujMvnJdBlMnfiwDqs19t8vXIcdiEutlBHbujrnNc%3d&risl=&pid=ImgRaw&r=0',
                    photoId: 7,
                },
                {
                    approvalCounts: '22',
                    link: 'https://img95.699pic.com/photo/50050/6061.jpg_wh860.jpg',
                    photoId: 1,
                },
            ],
            newData: {},
            isShow: true,
        };
    },
    created() {
        // this.getPhotosCategory('摄影师');
        // this._getAllPhotos();
        // 改变标签高亮状态
        this.$store.commit('changeSelectState', 3);
        // this._openPhotoDetail();
        this._getPhotographerInfo();
        console.log(this.photographerDetail);
        
    },
    mounted() {
        
    },
    methods: {
        //写摄像师获得路由
        //获得摄像师信息，并在摄像师信息里面运行this._openPhotoDetail();
        async _getPhotographerInfo() {
            var pageNum = this.pageNum;
            // console.log(11)
            console.log(pageNum);
            await photographerApi.getPhotographerInfo(pageNum).then((res) => {
                console.log(res);
                if (res.code !== 200) {
                    this.$message.error('获取摄影师信息失败');
                    return;
                }
                this.photographerDetail = res.data.list;
                var photographers = this.photographerDetail;
                this.pages = res.data.pages;
                this.pageNum = res.data.pageNum;

                //循环获得摄影师作品
                for (let i = 0; i < photographers.length; i++) {
                    
                    // console.log(photographers[i].userId)
                   this._getPhotographerWorks(photographers[i].userId, i);
                }
                // console.log(this.photographerDetail);
                // 查询个人作品
                // this._getPersonalPhotos();
                // 查询个人收藏
                // this._getCollectionList();
            });
        },
        async _getPhotographerWorks(id, i) {
            await photographerApi.getPhotographerWorks(id).then((res) => {
                if (res.code !== 200) {
                    this.$message.error('获取摄影师作品失败');
                    return;
                }
                this.newData = [];
                // this.newData.splice(0,)
                // console.log(res.data);
                this.newData = res.data;
                // console.log(111);
                // console.log(this.newData);
                // Vue.set(this.photographerDetail.worksDetail, i,this.newData);
                // this.photographerDetail.worksDetail.splice(i, 1, this.newData);
                    this.photographerDetail[i].worksDetail = this.newData;
                    this.isShow=false;
                    this.isShow=true;
                    // console.log(this.photographerDetail);
                // this.photographerDetail[i].worksDetail = this.newData;
                // console.log(this.newData);
                // this.photographerDetail.push(res.data)
                // console.log(this.photographerDetail);
            });
        },
        //点击头像和名字跳到个人主页
        // 前往个人详情页面
        _toDetail(id) {
            console.log(111);
            console.log(id);
            if (id === this.$store.state.userId) {
                this.$router.push('/personal');
                return;
            }
            this.$router.push({
                path: '/user/' + id,
            });
        },
        // 查看图片详情
        _openPhotoDetail(id) {
            console.log(id);
            this.photoDetailVisible = true;
            this.photoId = id;
        },
        // 前往上一页作品
        _toLastPhotographers() {
            if (this.pageNum === 1) {
                this.$message.error('已经是第一页了');
                return;
            }
            this.pageNum--;
            this._getPhotographerInfo();
        },
        // 前往下一页作品
        _toNextPhotographers() {
            if (this.pageNum === this.pages) {
                this.$message.error('已经是最后一页了');
                return;
            }
            this.pageNum++;
            this._getPhotographerInfo();
        },
    },
};
</script>
<style scoped>
.item {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(0, 0, 0, 0.09);
    padding: 18px 0;
    /* height: 100%; */
}

.box-card {
    width: 1380px;
    margin: 0 auto;
}
.info {
    display: flex;
    flex-direction: column;
    width: 200px;
    /* width: 100%; */
}
.info-text {
    /* font-size: 1px; */
    margin-top: 20px;
    color: rgba(0, 0, 0, 0.45);
}
/* .imgbackground{
    display: flex;
    flex-direction: column;
} */
.imgbackground .avatar {
    float: left;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    margin-right: 10px;
}
.follow {
    margin-top: 30px;
}

.work {
    display: flex;
    justify-content: space-around;
    width: 920px;
    /* flex-direction: row; */
    width: 320px;
    height: 180px;
}
.work > img {
    width: 100%;
}
</style>
